
 <!-- 
 @Author: Havery   
 @Date: 2021-01-15 14:32:28   
 @function: 选择用户   
----------------------------------------------------------  
 @Last Modified by:   LC-2021-01-15 14:32:28  
 @Modified function:xxx 
 -->
<template>
  <div>
    <div ref="treeHeight" class="tree-content">
      <tree-transfer
        :title="title"
        :from_data="fromData"
        :to_data="toData"
        :defaultProps="{ label: 'label' }"
        @add-btn="add"
        @remove-btn="remove"
        :mode="mode"
        height="540px"
        filter
        openAll
        :defaultCheckedKeys="defaultCheckedKeys"
        :renderContentLeft="renderContent"
        :renderContentRight="renderContent"
        defaultTransfer
      >
      </tree-transfer>
    </div>
    <div slot="footer " class="el-dialog__footer">
      <el-button size="mini" @click="closeDialog()">取消</el-button>
      <el-button size="mini" type="primary" @click="submitForm()"
        >确认</el-button
      >
    </div>
  </div>
</template>
<script>
import FlowInfoHttp from "@/api/flow/flowInfo"; //http
import treeTransfer from "../../../../../components/common/transferExtend"; // 引
//定义变量
const {
  loadDepartmentUserTreeList, //获取分页列表
} = FlowInfoHttp;
export default {
  //组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项
  //在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件
  components: {
    treeTransfer,
  },
  props: ["formInfo"], //父界面v-bind:editInfo一致
  data() {
    return {
      fromData: [],
      toData: [],
      title: ["未选列表", "已选列表"],
      mode: "transfer",
      selectInfo: {
        id: "",
        label: "",
      },
      checkedKeys: [],
      defaultCheckedKeys: [],
    };
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {
    this.loadDepartmentUserTreeList();
  },
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {},
  methods: {
    loadDepartmentUserTreeList() {
      loadDepartmentUserTreeList().then((response) => {
        let data = response.data;
        if (data.Code === 1000) {
          this.fromData = data.Data;
          if (this.formInfo.manager!=null&&this.formInfo.manager!=undefined) {
              let ids = this.formInfo.manager.split(",");
              for (let i = 0; i < ids.length; i++) {
                this.recursive(this.fromData[0], ids[i]);
              }
          } 
          this.defaultCheckedKeys = this.checkedKeys;
        } else {
          this.$messageTip.warning(data.Msg); 
        }
      });
    },
    recursive(data, key) {
      if (data.key == key) {
        this.checkedKeys.push(data.id);
        for (let i = 0; i < data.children.length; i++) {
          this.recursive(data.children[i], key);
        }
      } else {
        for (let i = 0; i < data.children.length; i++) {
          this.recursive(data.children[i], key);
        }
      }
    },
    //选中确定
    submitForm() {
      this.returnTo(this.toData);
      if (this.formInfo.optType != undefined) {
        this.$emit("callBack", {
          type: this.formInfo.optType,
          info: this.selectInfo,
        });
      } else {
        this.$emit("callBack", {
          type: "selectuser",
          info: this.selectInfo,
        });
      }
    },
    //组成返回类容
    returnTo(list) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].type == 100) {
          this.returnTo(list[i].children);
        } else {
          if (this.selectInfo.id != "") {
            if (this.selectInfo.id.indexOf(list[i].key) == -1) {
              this.selectInfo.id = this.selectInfo.id + "," + list[i].key;
              this.selectInfo.label =
                this.selectInfo.label + "," + list[i].label;
            }
          } else {
            this.selectInfo.id = list[i].key;
            this.selectInfo.label = list[i].label;
          }
        }
      }
    },
    //关闭增加弹出框
    closeDialog() {
      this.$emit("callBack", null);
    },
    // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
    changeMode() {
      if (this.mode == "transfer") {
        this.mode = "addressList";
      } else {
        this.mode = "transfer";
      }
    },
    // 监听穿梭框组件添加
    add(fromData, toData, obj) {
      this.toData = toData;
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log("fromData:", fromData);
      console.log("toData:", toData);
      console.log("obj:", obj);
    },
    // 监听穿梭框组件移除
    remove(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log("fromData:", fromData);
      console.log("toData:", toData);
      console.log("obj:", obj);
    },
    renderContent(h, {node, data, store }) {
      if (node.data.type==100) {
        return (
          <span>{node.label}</span>);
      } else {
        return (
          <div>
            <i class="el-icon-user-solid"></i>
            <span>{node.label}</span>
          </div>);
      }
     },
  },
};
</script>